<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性-监听属性</title>
    <!-- <script src="./vue.js"></script> -->
    <style>
        .list {
            width: 520px;
            height: 300px;
            display: flex;
        }

        img {
            width: 200px;
            height: 200px;
            margin-right: 10px;
        }

        .title {
            width: 300px;
            height: 80px;
        }

        .data {
            color: seagreen;
        }

        .price {
            width: 200px;
            height: 50px;
        }

        input {
            width: 200px;
        }

        #app {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .color {
            color: orange;
        }
    </style>


</head>

<body>

    <div id="app">
        <div class="list" v-for="item in list">
            <img :src="item.image" alt="" srcset="">
            <div class="list_txt">
                <div class="title">{{item.name}}</div>
                <div class="data">库存: {{ item.data - item.sum }}</div>
                <div class="price">价格:<div>{{item.price}}</div>
                </div>
                <input type="text" v-model="item.sum">
                <!-- <input type="text" v-model="item.sum" @input="getprice"> -->
            </div>

        </div>

        <!-- <h3>待付款:<span :class="color">{{price}}元</span></h3> -->
        <h3>待付款:<span :class="color">{{getprice}}元</span></h3>





    </div>






    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    list: [
                        { id: 1, name: "华硕 微星 七彩虹3070/3070Ti 8G吃鸡电竞游戏永劫无间设计专业独立LHR显卡", data: 100, sum: null, price: "2419", image: "https://img10.360buyimg.com/n1/s450x450_jfs/t1/100558/2/37712/68868/6412c1f8Fb7fd8d55/ccb24a7a4bf062b8.jpg" },
                        { id: 2, name: "华硕 （ASUS）ATS GeForce RTX 3060-O8G-GAMING 巨齿鲨系列电竞游戏专业独立显卡", data: 100, sum: null, price: "2199", image: "https://img14.360buyimg.com/n7/jfs/t1/45788/23/22180/55416/63e4a72fF71a49ea3/441c6228c3b6d4a6.jpg" },
                        { id: 3, name: "华硕（ASUS) RTX4070Ti显卡O12G ROG 猛禽 TUF 旗舰台式机电脑游戏独显 TUF-RTX4070Ti-12G-GAMING", data: 100, sum: null, price: "7199", image: "https://img13.360buyimg.com/n1/s450x450_jfs/t1/181002/5/5872/85396/60aca6eaEdd396e06/cfcb75d934ee1184.jpg" }
                    ],
                    price: 0,
                    color: "color"
                }
            },
            methods: {
                // 另一种写法
                // getprice() {
                // let sum = null
                // this.list.forEach(e => {
                //     if(e.sum <= 100){
                //         sum += (e.sum * e.price)
                //         // console.log(sum);
                //         this.price = sum
                //     }
                // });

                // }
                getif() {

                }
            },
            computed: {
                //用来计算总共需要多少钱
                getprice() {
                    let sum = null
                    this.list.forEach(e => {
                        if (e.sum <= 100) {
                            sum += (e.sum * e.price)
                        }
                    });
                    return sum
                }
            },
            watch: {
                // 对单独一个数据监听 
                // 'list.0.sum': {
                //     deep: true,
                //     handler: function (nvalue, ovalue) {
                //         if (nvalue >= 100) {
                // confirm("真的需要这么多?")
                // this.list[0].sum = 100
                //         }
                //     }
                // },

                // 对整个数组里相同属性监听
                list: {
                    // 启动深度监听
                    deep: true,
                    // newVal 新的数据  oldVal旧数据
                    handler(newVal, oldVal) {
                        // 这次监听的是数组所以需要循环一下
                        for (let i = 0; i < this.list.length; i++) {
                            // 判断用户在输入框输入是否超过 库存 100
                            if (newVal[i].sum >= 100) {
                                this.list[i].sum = 100
                            }
                        }
                       
                    }
                }


            }

        }).mount("#app")



    </script>



</body>

</html>